<template>
    <div>
        <a-row :gutter="16">
            <a-col :span="18">

                <a-row :gutter="16">
                    <a-col :span="4">
                        <a-card>
                            <a-statistic title="Feedback" :value="11.28" :precision="2" suffix="%"
                                :value-style="{ color: '#3f8600' }" style="margin-right: 50px">
                                <template #prefix>
                                    <arrow-up-outlined />
                                </template>
                            </a-statistic>
                        </a-card>
                    </a-col>
                    <a-col :span="4">
                        <a-card >
                            <a-statistic title="Idle" :value="9.3" :precision="2" suffix="%" class="demo-class"
                                :value-style="{ color: '#cf1322' }">
                                <template #prefix>
                                    <arrow-down-outlined />
                                </template>
                            </a-statistic>
                        </a-card>
                    </a-col>
                </a-row>

            </a-col>
            <a-col :span="6">
                <a-card title="聊天记录"  >
                    <div style="height: calc(100vh - 320px)">
                        asdas
                    </div>

                    <template #actions>
                        聊天
                    </template>
                </a-card>
            </a-col>
        </a-row>

        {{ id }}
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const id = computed(() => route.params.id)
const columns = [
    {
        title: '账号',
        dataIndex: 'account',
    }
]
</script>

<style scoped lang="scss"></style>
